@import "public";
@import "main";

$headH:.9rem;
.headD{height: $headH}
.head{position: fixed; z-index: 50; left: 0; top: 0; width: 100%; @extend .transition;
  &.on, &.pageHead{background: #333;
    a.logo{background-image: url("../image/logo2.png")}
    .nav{
      a.name{color: #fff;
        &:hover, &.on{color: $red}
      }
    }
  }
  .wal{height: $headH; position: relative}
  a.logo{display: block; width: 1.61rem; height: 100%; background: url("../image/logo.png") center no-repeat; background-size: 100%}
  a.tel{display: block; font-weight: bold; line-height: $headH; color: $red; @include absolute($t:0, $r:0); font-size: .16rem; padding-left: .3rem; background: url("../image/img20.png") left center no-repeat; background-size: .2rem; letter-spacing: 1px}
}
.nav{@include absolute($t:0, $r:1.7rem);
  li{float: left; position: relative}
  a.name{display: block; font-size: .16rem; color: #666; line-height: $headH; height: $headH; padding: 0 .26rem;
    &:hover, &.on{color: $red}
  }
  .list{position: absolute; left: 50%; top: -100%; width: 1.4rem; margin-left: -.7rem; opacity: 0; visibility: hidden;
    a{display: block; height: .6rem; line-height: .6rem; font-size: .14rem; text-align: center; color: #fff; background: rgba(0, 0, 0, .5);
      &:hover{background: rgba(0, 0, 0, .7)}
    }
    dd:last-child a{@include radiusLB(.08rem); @include radiusRB(.08rem)}
  }
  li:hover{
    a.name{color: $red}
    .list{opacity: 1; visibility: visible; top: 100%;
      $time:0.5s;
      transition:opacity $time ease;
      -webkit-transition:opacity $time ease;
      -moz-transition:opacity $time ease;
      -o-transition:opacity $time ease;
    }
  }
}

.foot{background: #e6e6e6; position: relative; z-index: 30; min-height: 3.03rem;
  &:before{@include before(); left: 0; top: -.12rem; width: 100%; height: .12rem; background: url("../image/img60.png") center repeat-x; background-size: auto .12rem}
  .wal{min-height: 2.53rem; position: relative;
    .list{width: 5.15rem; margin: 0 auto; padding: .6rem 0;
      ul{@extend .flex; @extend .flexBetween}
      img{height: 1.2rem}
    }
    a.topA{display: block; background: url("../image/img70.png") center no-repeat; background-size: cover; width: .7rem; height: .35rem; @include absolute($l:50%, $b:0); margin-left: -.35rem;
      &:hover{background-image: url("../image/img70on.png")}
    }
  }
  .msg{text-align: center; font-size: .14rem; color: #666; border-top: #d6d6d6 solid 1px; line-height: .49rem}
}

.indexBanner{background: url("../image/img1920.png") center no-repeat; background-size: cover; height: 8.2rem; position: relative; max-width: 19.2rem; margin: 0 auto; overflow: hidden;
  .bg{width: 19.2rem; position: absolute; left: 50%; top: 0; margin-left: -9.6rem}
  .img{width: 9.53rem; @include absolute($l:50%, $t:1.85rem); margin-left: -4.76rem}
  img{position: relative; left: 0; top: 0;
    &.on{
      transition-duration: 0s;
      -webkit-transition-duration: 0s;
      -moz-transition-duration: 0s;
    }
  }
  .msg{@include absolute($l:0, $t:6.75rem); width: 100%; text-align: center; font-size: .24rem; color: #e5007f; line-height: .42rem}
}

.pagebg1{background: url("../image/pagebg1.png") center bottom no-repeat; background-size: 100%; min-height: 10rem}

.pageTitle{text-align: center; padding-bottom: .36rem;
  h2 img{height: .36rem}
  div{font-family: 'AveraSansRg'; font-size: .24rem; color: $red; letter-spacing: .02rem; padding-top: .12rem}
}

.indexPart1{min-height: 5.5rem; position: relative; padding: 1.2rem 0 1rem 3.2rem;
  .img{@include absolute($l:-.14rem, $t:.6rem); width: 2.93rem}
  .pageTitle{text-align: left; padding-bottom: 0}
  .content{padding-top: .25rem; font-size: .14rem; line-height: .3rem; text-align: justify; color: #666;
    p{padding-bottom: .15rem}
  }
}

.indexPart2{padding-bottom: .8rem;
  ul{margin-left: -.6rem; @extend .flexWrap}
  li{width: 33.333%; padding: .2rem 0 .4rem .6rem}
  .container{padding-left: .2rem;
    .img{position: relative;
      &:before{@include before(); left: -.2rem; top: -.2rem; width: 100%; height: 100%; background: url("../image/img340.png") center no-repeat; background-size: 100%; opacity: .3}
      img{position: relative; @include radius(.06rem)}
      a{display: block; @include absolute($l:0, $t:0); width: 100%; height: 100%; @include radius(.06rem); opacity: 0; background: rgba(229, 0, 127, .4) url("../image/img50.png") center no-repeat; background-size: .5rem}
    }
    .name{font-size: .16rem; font-weight: bold; padding: .22rem 0 .1rem 0}
    p{font-size: .14rem; line-height: 2em; color: #666}
    .time{line-height: .44rem; font-size: .12rem; color: #999; padding-left: .24rem; background: url("../image/img16.png") left center no-repeat; background-size: .16rem}
  }
  .container:hover{
    .img{
      &:before, a{opacity: 1}
    }
    .name a{color: $red}
  }
}

.indexPart3{width: 100%; overflow: hidden; position: relative;
  a.arrow{display: block; width: .4rem; height: 1.2rem; background: center no-repeat; background-size: cover; @include absolute($t:50%); margin-top: -.6rem; opacity: .6;
    &:hover{opacity: 1}
    &.prev{left: 0; background-image: url("../image/prev40.png")}
    &.next{right: 0; background-image: url("../image/next40.png")}
  }
  ul{@extend .flexWrap}
  li{width: 16.666%; position: relative; overflow: hidden;
    .img{margin-left: -1px; margin-right: -1px}
    img{opacity: .5}
    a.name{display: block; font-size: .16rem; color: #fff; padding: 0 .2rem; @include absolute($l:0, $b:.2rem); opacity: 0}
  }
  li:hover{
    img{opacity: 1}
    a.name{opacity: 1}
  }
}

.indexPart4{padding: 1.2rem 0; background: url("../image/indexPart4.png") center 1.65rem no-repeat; background-size: 19.2rem; min-height: 8.5rem;
  .pageTitle{padding-bottom: .9rem}
  .list{position: relative;
    .arrow{@include absolute($t:3.45rem, $r:-1.5rem); @extend .flex;
      a{width: .5rem; height: .5rem; background: center no-repeat; background-size: cover; margin-left: .06rem;
        &.prev{background-image: url("../image/prev50.png");
          &:hover{background-image: url("../image/prev50on.png")}
        }
        &.next{background-image: url("../image/next50.png");
          &:hover{background-image: url("../image/next50on.png")}
        }
      }
    }
  }
  .swiper-slide{@extend .flexWrap; @extend .flexBetween; align-items: flex-start; -webkit-align-items: flex-start;
    .bigImg{background: url("../image/img605.png") center no-repeat; background-size: 100% 100%; width: 6.05rem; min-height: 4rem; padding: .2rem;
      div{background: center no-repeat; background-size: cover; @include radius(.1rem); height: 3.6rem; border: #c08330 dashed .02rem; display: none}
    }
    .imgList{width: 5.8rem;
      ul{@extend .flexWrap; margin-left: -.22rem}
      li{width: 50%; padding: 0 0 .25rem .22rem;
        .img{position: relative; @include radius(.06rem); width: 100%; overflow: hidden}
        a{display: block; @include absolute($l:0, $t:0); width: 100%; height: 100%; opacity: 0; background: rgba(229, 0, 127, .4) url("../image/img50.png") center no-repeat; background-size: .5rem}
        a:hover{opacity: 1}
      }
    }
  }
}
@media screen and (max-width: 1550px){
  .indexPart4{
    .list .arrow{right: 0; top: 4.2rem}
  }
}

.indexPart4Layer{position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); @extend .flex; @extend .itemsCenter; @extend .justifyCenter; opacity: 0; visibility: hidden; @extend .transition;
  &.show{opacity: 1; visibility: visible}
  .container{width: 6.8rem; position: relative;
    a.close{display: block; @include absolute($t:.16rem, $r:.16rem); width: .5rem; height: .5rem; @include radius(50%); background: rgba(255, 255, 255, .2) url("../image/close50.png") center no-repeat; background-size: cover;
      &:hover{background-color: #fff}
    }
    a.arrow{display: block; width: .6rem; height: .6rem; background: center no-repeat; background-size: cover; @include absolute($t:50%); margin-top: -.3rem;
      &.prev{left: -.93rem; background-image: url("../image/prev60.png");
        &:hover{background-image: url("../image/prev60on.png")}
      }
      &.next{right: -.93rem; background-image: url("../image/next60.png");
        &:hover{background-image: url("../image/next60on.png")}
      }
    }
  }
  .list{background: #fff; @include radius(.1rem); width: 100%; overflow: hidden; position: relative}
  .swiper-slide{height: 6.8rem; @extend .flex; @extend .itemsCenter; @extend .justifyCenter; overflow: hidden; position: relative}
}

.indexPart5{background: #f5f5f5; position: relative;
  &:before{@include before(); left: 0; top: -.12rem; width: 100%; height: .12rem; background: url("../image/img60_2.png") center repeat-x; background-size: auto .12rem}
  .bg{position: absolute; left: 0; top: -.45rem; width: 100%; height: 150%; background: url("../image/img1360.png") center top no-repeat; background-size: 13.6rem}
  .wal{position: relative; min-height: 5.05rem; z-index: 2; text-align: center; padding: .55rem 0;
    .msg{font-size: .2rem; color: #cc9952}
    .img{width: 6.5rem; margin: 0 auto; padding: .25rem 0 .3rem 0}
    .btn{padding-bottom: .4rem;
      a{display: block; margin: 0 auto; background: $red; color: #fff; @include radius(.5rem); font-size: .2rem; width: 1.4rem; height: .48rem; line-height: .48rem}
      a:hover{
        box-shadow: 0 .1rem .2rem rgba(229, 0, 127, .3);
        -webkit-box-shadow: 0 .1rem .2rem rgba(229, 0, 127, .3);
        -moz-box-shadow: 0 .1rem .2rem rgba(229, 0, 127, .3);
      }
    }
    .ewm{
      img{width: 1.2rem}
      p{font-size: .14rem; color: #666; padding-top: .15rem}
    }
  }
}

.pageBanner{height: 4rem; background: center no-repeat; background-size: cover; padding-top: 1.2rem;
  .title{background: url("../image/img360.png") center no-repeat; background-size: 3.6rem; height: 1.6rem; text-align: center; color: $red; font-size: .18rem; text-transform: uppercase;
    h2{font-size: .36rem; padding: .3rem 0; letter-spacing: 1px}
  }
}

.about_01{padding: 1.2rem 0;
  .content{text-align: justify; font-size: .14rem; line-height: .3rem; color: #666;
    p{padding-bottom: .1rem}
  }
  h2.title{font-size: .16rem; line-height: .3rem; padding-bottom: .25rem}
  .list{min-height: 1rem; background: url("../image/line2.png") center repeat-x; background-size: auto .02rem; position: relative;
    .wal{position: relative}
    a.arrow{display: block; width: .44rem; height: .44rem; background: center no-repeat; background-size: cover; @include absolute($t:50%); margin-top: -.22rem;
      &:hover{opacity: 1}
      &.prev{left: -.5rem; background-image: url("../image/prev.png");
        &:hover{background-image: url("../image/prevon.png")}
      }
      &.next{right: -.5rem; background-image: url("../image/next.png");
        &:hover{background-image: url("../image/nexton.png")}
      }
    }
    #about_01{width: 100%; overflow: hidden; position: relative}
    .swiper-slide{width: 1.92rem; text-align: center; min-height: 2.45rem; position: relative; background: url("../image/img12.png") center no-repeat; background-size: .12rem; padding-top: .76rem; @extend .transition;
      .year{font-size: .3rem; font-family: 'AveraSansRg';
        img{height: .26rem}
      }
      .msg{height: 1rem; width: 100%; background: #f5f5f5; @include radius(.08rem); position: absolute; left: 0; bottom: 0; @extend .flex; @extend .itemsCenter; @extend .justifyCenter; font-size: .14rem; line-height: .26rem; color: #666; @extend .transition}
      &:nth-child(even){padding-top: 1.44rem;
        .msg{bottom: auto; top: 0}
      }
      &:hover{color: $red;
        .msg{color: $red}
      }
    }
  }
}

.about_02{
  .pageTitle{padding-bottom: 1.2rem}
  ul{@extend .flex}
  li{width: 33.333%; height: 4.3rem; position: relative;
    .img{width: 2.4rem; margin: 0 auto; position: relative; z-index: 11; opacity: 0; @include scale(.4); @extend .transition;
      h2{width: 1.4rem; height: .9rem; background: rgba(0, 0, 0, .5); @include radius(.08rem); @include absolute($l:50%, $t:50%); margin-left: -.7rem; margin-top: -.45rem; color: #fff; @extend .flex; @extend .itemsCenter; @extend .justifyCenter; font-size: .2rem; line-height: .34rem; text-align: center}
    }
    dd{position: absolute; left: 50%; width: 1.2rem; font-size: .16rem; opacity: 0; @include scale(.2); @extend .transition;
      div{position: relative; left: 0; top: 0; @extend .transition; @include radius(50%); @extend .flex; @extend .itemsCenter; @extend .justifyCenter; height: 1.2rem; background: #ebebeb}
      div.on{
        transition-duration: 0s;
        -webkit-transition-duration: 0s;
        -moz-transition-duration: 0s;
      }
    }
  }
  .li_01{
    .dd_01{margin-left: -1.94rem; top: -.31rem}
    .dd_02{margin-left: -2.2rem; top: 1.46rem; width: .98rem;
      div{height: .98rem}
    }
    .dd_03{margin-left: .59rem; top: 1.47rem; width: 1.64rem;
      div{height: 1.64rem}
    }
    .dd_04{margin-left: .87rem; top: .37rem; width: .68rem;
      div{height: .68rem}
    }
  }
  .li_02{
    .dd_01{margin-left: -1.84rem; top: -.66rem; width: 1.44rem;
      div{height: 1.44rem}
    }
    .dd_02{margin-left: -.87rem; top: 2.52rem; width: .73rem;
      div{height: .73rem}
    }
    .dd_03{margin-left: .86rem; top: .89rem; width: 1.2rem;
      div{height: 1.2rem}
    }
    .dd_04{margin-left: 1.59rem; top: -.13rem; width: .58rem;
      div{height: .58rem}
    }
  }
  .li_03{
    .dd_01{margin-left: -1.21rem; top: -.56rem; width: 1.48rem;
      div{height: 1.48rem}
    }
    .dd_02{margin-left: -1.59rem; top: 2.09rem; width: .9rem;
      div{height: .9rem}
    }
    .dd_03{margin-left: .65rem; top: 1.52rem; width: 1.31rem;
      div{height: 1.31rem}
    }
    .dd_04{margin-left: 1.39rem; top: -.36rem; width: .80rem;
      div{height: .80rem}
    }
  }
}
.about_02{
  li.on{
    .img, dd{opacity: 1; @include scale(1);
      transition-duration: 1s;
      -webkit-transition-duration: 1s;
      -moz-transition-duration: 1s;
    }
  }
  li.li_01.on{
    .dd_01{@include transitionDelay(1s)}
    .dd_02{@include transitionDelay(1.5s)}
    .dd_03{@include transitionDelay(2s)}
    .dd_04{@include transitionDelay(2.5s)}
  }
  li.li_02.on{
    .dd_01{@include transitionDelay(1s)}
    .dd_03{@include transitionDelay(1.5s)}
    .dd_02{@include transitionDelay(2s)}
    .dd_04{@include transitionDelay(2.5s)}
  }
  li.li_03.on{
    .dd_03{@include transitionDelay(1s)}
    .dd_01{@include transitionDelay(1.5s)}
    .dd_02{@include transitionDelay(2s)}
    .dd_04{@include transitionDelay(2.5s)}
  }
}

.about_03{min-height: 3rem; background: #f5f5f5;
  .pageTitle{padding: 1rem 0 .45rem 0}
  .list{position: relative; min-height: 4rem;
    &:before{@include before(); background: url("../image/img536.png") center no-repeat; background-size: cover; width: 5.36rem; height: 1.21rem; left: -1.57rem; top: -.76rem}
    &:after{@include before(); background: url("../image/img425.png") center no-repeat; background-size: cover; width: 4.35rem; height: 1.22rem; right: -1.2rem; bottom: .32rem}
    ul{position: relative; z-index: 10; @extend .flexWrap; @extend .flexBetween}
    li{width: 3.68rem;
      .container{height: 2.8rem; background: #fff center no-repeat; background-size: cover; @include radius(.1rem); text-align: center; font-size: .16rem}
    }
    .li_01 .container{padding: .45rem .35rem 0 .35rem; line-height: .3rem;
      dl{@extend .flex; @extend .justifyCenter; margin-left: -.1rem; margin-right: -.1rem}
      dd{padding: .15rem .1rem .3rem .1rem;
        a{display: block; width: 1.3rem; height: .5rem; line-height: .5rem; background: $red; color: #fff; @include radius(.08rem)}
        a:hover{
          box-shadow: 0 .1rem .2rem rgba(229, 0, 127, .3);
          -webkit-box-shadow: 0 .1rem .2rem rgba(229, 0, 127, .3);
          -moz-box-shadow: 0 .1rem .2rem rgba(229, 0, 127, .3);
        }
      }
    }
    .li_02 .container{line-height: .4rem; padding-top: 1rem;
      span{font-size: .24rem; color: #e5007f}
    }
    .li_03 .container{
      .img{width: 3rem; margin: 0 auto; padding-top: .56rem}
      p{padding: .13rem 0 .3rem 0}
      a{display: block; margin: 0 auto; background: $red; color: #fff; width: 1rem; height: .4rem; line-height: .4rem; @include radius(.5rem)}
      a:hover{
        box-shadow: 0 .1rem .2rem rgba(229, 0, 127, .3);
        -webkit-box-shadow: 0 .1rem .2rem rgba(229, 0, 127, .3);
        -moz-box-shadow: 0 .1rem .2rem rgba(229, 0, 127, .3);
      }
    }
  }
}
@media screen and (max-width: 1650px){
  .about_03 .list{
    &:before{left: -1rem}
    &:after{right: -1rem}
  }
}

.about_04{padding: 1.2rem 0 .8rem 0;
  .list{padding-top: .2rem}
  li{@extend .flex; @extend .flexBetween; @extend .itemsCenter; padding-bottom: .4rem;
    .img{width: 3rem}
    .container{width: 8.5rem; line-height: .3rem;
      h2{font-size: .18rem}
      p{padding-top: .1rem; font-size: .14rem; color: #666}
    }
  }
  li:nth-child(even){flex-direction: row-reverse; -webkit-flex-direction: row-reverse}
}

.pageNav{position: relative; border-bottom: #eee solid 1px; height: 1.32rem;
  ul{@include absolute($l:0, $b:-1px); @extend .flex}
  a{display: block; height: .5rem; line-height: .5rem; padding: 0 .24rem; position: relative; font-size: .16rem; color: #666;
    &:before{@include before(); left: 0; bottom: 0; width: 100%; height: 2px; background: $red; opacity: 0}
    &:hover, &.on{color: $red;
      &:before{opacity: 1}
    }
  }
}

.pageNum{padding: .4rem 0 1.2rem 0; @extend .flex; @extend .justifyCenter;
  a{width: .4rem; height: .4rem; background: #f5f5f5; @include radius(.5rem); font-size: .16rem; margin: 0 .1rem; @extend .flex; @extend .itemsCenter; @extend .justifyCenter; color: #666;
    img:nth-child(2){display: none}
  }
  a:hover, a.on{background: $red; color: #fff;
    img:nth-child(1){display: none}
    img:nth-child(2){display: block}
  }
  a.arrow img{width: .08rem}
  a.arrow2{width: 1rem;
    img{width: .18rem}
    &.prev img{margin-right: .1rem}
    &.next img{margin-left: .1rem}
  }
  div{@extend .flex}
}

.pageNum2{padding: .35rem 0 .95rem 0; border-top: #edf2ef solid 1px; position: relative; font-size: .14rem;
  li{line-height: 2em; padding-bottom: .2rem;
    a{color: #666}
    a:hover{color: $red}
  }
  dl.share{@include absolute($t:.3rem, $r:0); @extend .flex; @extend .itemsCenter;
    dd{padding-left: .1rem}
    a{display: block; width: .36rem; background: #ccc; @include radius(50%)}
    a:hover{background: $red}
  }
  a.back{display: block; color: $red; border: $red solid 1px; @include radius(.5rem); width: 1rem; height: .26rem; line-height: .24rem; text-align: center; @include absolute($t:.86rem, $r:0);
    &:hover{color: #fff; background: $red}
  }
}

.pageNow{font-size: .14rem; color: #666; padding: .75rem 0 .5rem 0;
  a{color: #666;
    &:hover{color: $red}
  }
}

.newShow{text-align: center; font-size: .14rem;
  h2.title{font-size: .24rem}
  .time{padding: .15rem 0 .35rem 0; color: #999}
  .img{padding-bottom: .3rem}
  .content{line-height: 2em; text-align: justify; color: #666; padding-bottom: .7rem;
    p{padding-bottom: .1rem}
  }
}

.rule{min-height: 6rem; background: #f5f5f5; padding: 1.2rem 0;
  .wal{@extend .flexWrap; @extend .flexBetween}
  .col{width: 100%; padding-bottom: .38rem}
  .col-2{width: 5.8rem}
  .title{height: .56rem; background: url("../image/title.jpg") center no-repeat; background-size: 100% 100%; @extend .flex; @extend .itemsCenter; padding-left: .5rem; font-size: .2rem; @include radiusLT(.08rem); @include radiusRT(.08rem);
    img{width: .34rem; margin-right: .08rem}
  }
  .bg{min-height: 1.2rem; background: #fff; @include radiusLB(.08rem); @include radiusRB(.08rem); font-size: .14rem; color: #666; padding: .4rem .5rem}
  .list{
    ul{@extend .flexWrap}
    li{padding: 0 .14rem; min-width: 2.9rem; line-height: .4rem; background: url("../image/img5.png") left center no-repeat; background-size: .05rem}
  }
  .part1{min-height: 2.4rem;
    dl{@extend .flex; @extend .flexBetween}
    dd{width: 1.47rem; height: .8rem; @include radius(.08rem); background: #eee; text-align: center; @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter;
      div{padding-bottom: .08rem; font-size: .18rem; color: #333}
    }
  }
  .content{line-height: .4rem; min-height: .7rem;
    span{color: $red}
  }
  .part2{min-height: 2.4rem; @extend .flex; @extend .flexBetween; @extend .itemsCenter;
    .content{width: 4.5rem}
    dl{width: 6.1rem; @extend .flex; @extend .flexBetween}
    dd{width: 1.9rem; height: 1.7rem; @include radius(.08rem); background: #eee; text-align: center; @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter;
      div{padding-bottom: .08rem; font-size: .18rem; color: #333}
      p{line-height: .24rem; padding: 0 .25rem}
    }
  }
}

